<template>

  <NavBarCmp :leftArrow="true" :navbarTitle="movieTitle" />

  <div class="credits">
    <!-- 循环渲染每个角色类型 -->
    <van-cell is-link v-for="(group, index) in formattedCredits" :key="index" @click="showRoleList(group.cr)">
      <template #title>
        <span class="custom-title">{{ group.roleName }}({{ group.items.length }})</span>
      </template>
    </van-cell>
  </div>
</template>



<script setup>
import { computed, ref } from 'vue'
import { useStore } from "@/stores/index.js"
const store = useStore();
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();


const movieTitle = computed(() => store.movieDetailPage.movieInfo.nm);
const credits = computed(() => store.movieDetailPage.movieActors);
// const uniqueRoles = ref([])


const formattedCredits = computed(() => {
  return credits.value.reduce((acc, item) => {
    const role = acc.find(roleItem => roleItem.cr === item.cr);
    if (role) {
      role.items.push(item);
    } else {
      let roleName = item.desc.split(':')[0].trim();
      if (item.cr === 1) {
        roleName = "演员";
      }
      acc.push({
        roleName: roleName,
        cr: item.cr,
        items: [item]
      });
    }
    return acc;
  }, []);
});





const showRoleList = (cr) => {
  // 跳转到分列表页面
  router.push(`/movie/${route.params.movieId}/cast/${cr}`);
};


</script>


<style scoped>
.credits {
  margin-top: 50.5px;
}

.van-cell {
  cursor: pointer;
}
</style>
